<script lang="ts" setup>
import { ref, onMounted, reactive, nextTick } from 'vue'
import { ElMessageBox } from 'element-plus'
import 'vue-cropper/dist/index.css'
import { VueCropper } from 'vue-cropper'
/*
 * 打开弹框
 */
/* 父组件传参 */
interface IProps {
  fileUrl: string
}
const props = withDefaults(defineProps<IProps>(), {
  fileUrl: '',
})
const loading = ref<boolean>(false)
const dialogVisible = ref<boolean>(false)
// 裁剪组件需要使用到的参数
interface Options {
  img: string | ArrayBuffer | null // 裁剪图片的地址
  info: true // 裁剪框的大小信息
  outputSize: number // 裁剪生成图片的质量 [1至0.1]
  outputType: string // 裁剪生成图片的格式
  canScale: boolean // 图片是否允许滚轮缩放
  autoCrop: boolean // 是否默认生成截图框
  autoCropWidth: number // 默认生成截图框宽度
  autoCropHeight: number // 默认生成截图框高度
  fixedBox: boolean // 固定截图框大小 不允许改变
  fixed: boolean // 是否开启截图框宽高固定比例
  fixedNumber: Array<number> // 截图框的宽高比例  需要配合centerBox一起使用才能生效
  full: boolean // 是否输出原图比例的截图
  canMoveBox: boolean // 截图框能否拖动
  original: boolean // 上传图片按照原始比例渲染
  centerBox: boolean // 截图框是否被限制在图片里面
  infoTrue: boolean // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
  accept: string // 上传允许的格式
}
// 裁剪组件需要使用到的参数
const options = reactive<Options>({
  img: '', // 需要剪裁的图片
  autoCrop: true, // 是否默认生成截图框
  autoCropWidth: 150, // 默认生成截图框的宽度
  autoCropHeight: 150, // 默认生成截图框的长度
  fixedBox: false, // 是否固定截图框的大小 不允许改变
  info: true, // 裁剪框的大小信息
  outputSize: 1, // 裁剪生成图片的质量 [1至0.1]
  outputType: 'png', // 裁剪生成图片的格式
  canScale: true, // 图片是否允许滚轮缩放
  fixed: true, // 是否开启截图框宽高固定比例
  fixedNumber: [1, 1], // 截图框的宽高比例 需要配合centerBox一起使用才能生效 1比1
  full: true, // 是否输出原图比例的截图
  canMoveBox: false, // 截图框能否拖动
  original: false, // 上传图片按照原始比例渲染
  centerBox: true, // 截图框是否被限制在图片里面
  infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
  accept: 'image/jpeg,image/jpg,image/png,image/gif,image/x-icon',
})
// 入参
// 生命周期
const openDialog = () => {
  dialogVisible.value = true
  nextTick(() => {
    options.img = props.fileUrl
  })
}
const cropperRef = ref()
const validateForm = () => {
  ElMessageBox.confirm('是否确定裁剪？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      cropperRef.value.getCropBlob((data: any) => {
        // do something
        // 完成裁剪，回显
        const url = getObjectURL(data)

        console.log(url, '111')

        // const formData = new FormData()
        // formData.append('file', file)
        // // formData.append('dabh', store.$state.nodeTreeData?.dabh)
        // formData.append('wjmc', '')
        // // formData.append('wjxsmc', '')
        // const res = await wjfwSerivce.upload(formData).catch((err) => {
        //   !err.isError && ElMessage({ type: 'warning', message: err.message })
        //   return {
        //     data: {},
        //   }
        // })
      })
      // dialogVisible.value = false
    })
    .catch(() => {
      //
    })
}
// 获取url
const getObjectURL = (file: any) => {
  let url = null
  if (window.createObjectURL !== undefined) {
    // basic
    url = window.createObjectURL(file)
  } else if (window.URL !== undefined) {
    // mozilla(firefox)
    url = window.URL.createObjectURL(file)
  } else if (window.webkitURL !== undefined) {
    // webkit or chrome
    url = window.webkitURL.createObjectURL(file)
  }
  return url
}

defineExpose({ openDialog })
</script>
<template>
  <el-dialog v-model="dialogVisible" title="裁剪" width="80%" :close-on-click-modal="false">
    <div class="dialog-box">
      <!--  @real-time="previewHandle" -->
      <vueCropper
        :style="{ width: '400px' }"
        ref="cropperRef"
        :img="options.img"
        :info="true"
        :info-true="options.infoTrue"
        :auto-crop="options.autoCrop"
        :fixed-box="options.fixedBox"
        :can-move="options.canMoveBox"
        :can-scale="options.canScale"
        :fixed-number="[1, 1]"
        :fixed="options.fixed"
        :full="options.full"
        :center-box="options.centerBox"
      />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="validateForm" :loading="loading">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.dialog-box {
  width: 100%;
  height: 500px;
  overflow: auto;
}
</style>
